[자바스크립트] 인코딩, escape(), encodeURI(), encodeURIComponent()

아래는 자바스크립트의 인코딩 함수에 관하여 정리한 내용으로 간략하게 알아봅니다.

! 자바스크립트 인코딩(Encoding)이란?

인코딩은 특정 문자열이나 값을 ASCII나 기타 정해진 포맷의 값으로 변환해주는 것을 인코딩한다라고 말합니다. 여기서 인코딩을 하는 이유는 네트워크의 프로토콜과 비슷한데 예를들어 통신을 위해서 송신하는 곳과 전달 받는 곳의 데이터 형태가 다른 경우 서로 이해할 수 없기 때문에 정해진 인코딩 규칙을 사용하여 보내는 곳에서 인코딩을 ... 받는 곳에서 디코딩하여 사용할 수 있습니다.

자바스크립트는 내장함수로 인코등을 지원합니다. 크게 아래와 같이 세 가지의 함수가 있습니다.

1. escape()
2. encodeURI()
3. encodeURIComponent()

셋 모두 비슷하지만 조금씩 다르게 사용됩니다. 위 인코딩 중에서 특히 encodeURIComponent()가 많이 사용되는 것 같네요. 그럼 간단하게 각각 알아보겠습니다. 가장 먼저 escape()입니다.


@ escape() 인코딩
제일 먼저 알아볼 escape()는 특수문자를 인코딩하며 흔히 사용되는 문자와, 숫자, 일부 특수 문자( *, @, -, _, +, ., /)는 제외하는 유니코드 형태로 인코딩을 수행합니다. 참고로 Deprecated된 함수로 가급적 아래 함수들을 사용할 것을 권장합니다. 다만 알아볼 필요는 있겠죠.


@ encodeURI()
쉽게 볼 수 있는 인코딩 함수입니다. url 주소에 주로 사용되는데 참고로 encodeURI()는 인터넷 주소에 쓰이는 특수문자( / ? & ; = )를 인코딩하지 않습니다.


@ encodeURIComponent()
마지막으로 위의 encodeURI()와 비슷하지만 살짝 다른 encodeURIComponent()는 인터넷 주소에 쓰이는 특수문자( / ? & ; = )도 함께 인코딩하는 점이 다릅니다. 참고로 슬래쉬도 인코딩하기 때문에 주소창에 인코딩시에는 주의해야 합니다. 인코딩의 목적에 맞게 사용해야 합니다.

여기까지 위의 세 가지 함수 모두를 알아봤습니다. 인코딩을 했다면 디코딩도 필요하겠습니다. 디코딩은 아래와 같습니다.

! 디코딩(Decoding) 알아보기

동일하게 자바스크립트의 디코딩 함수 세 가지이며 디코딩 함수는 아래와 같습니다.

1. unescape()
2. decodeURI()
3. decodeURICompoonent()

디코딩은 인코딩된 값을 인코딩 전으로 돌려놓는 함수입니다. 즉 위의 인코딩 결과값을 원래의 값으로 동일하게 반환하게 됩니다.


여기까지 자바스크립트의 인코딩, 디코딩에 대하여 간략하게 알아봤습니다.